<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="innerVisible"
      :width="width"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
      append-to-body
    >
      <div class="form" :style="`max-height: ${maxHeight}; overflow-y: auto`">
        <slot></slot>
      </div>
      <span slot="footer" class="dialog-footer">
        <slot name="buttonFooter">
          <el-button
            v-if="type !== 'select'"
            type="primary"
            :loading="loading"
            @click="dialogOK"
          >保存</el-button>
          <el-button @click="innerVisible = false">取 消</el-button>
        </slot>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "PublicDialog",
  props: {
    // 表格加载项
    title: {
      type: String,
      default() {
        return "新增";
      },
    },
    type: {
      type: String,
      default() {
        return "add";
      },
    },
    maxHeight: {
      type: String,
      default() {
        return "400px";
      },
    },
    // 表格加载项
    dialog: {
      type: Boolean,
      default() {
        return false;
      },
    },
    loading: {
      type: Boolean,
      default() {
        return false;
      },
    },
    width: {
      type: String,
      default() {
        return "1200px";
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    innerVisible: {
      get: function() {
        return this.dialog;
      },
      set: function(val) {
        // 父组件上填写.sync 动态控制prop
        this.$emit("update:dialog", val);
      },
    },
  },
  methods: {
    dialogOK() {
      const data = {}
      this.$emit("handleSave", data);
    },
  },
};
</script>

<style lang="scss">
.title {
  font-size: 18px;
  color: black;
  padding: 10px;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 10px;
}
</style>
